<script setup lang="ts">
let gridContainer = ref<HTMLElement>()
let gridAutoFlow = ref('row')

function add () {
  if(!gridContainer.value) return
  let newItem = document.createElement("figure");

  newItem.classList.add("item");

  const imgElement = `<img src="https://loremflickr.com/1024/860?random=${getRandomIntInclusive(
      1,
      9
  )}" alt="">`;
  newItem.innerHTML = imgElement;
  gridContainer.value.appendChild(newItem);
}

function subtract() {
  if(!gridContainer.value) return
  console.log(gridContainer.value?.childElementCount)
  let count = gridContainer.value?.childElementCount
  if (count > 1) {
    gridContainer.value.removeChild(gridContainer.value.children[count - 1]);
  }
}

function getRandomIntInclusive(min: number, max: number) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

<template>
  <div class="wrap">
    <div class="container" ref="gridContainer">
      <figure class="item">
        <img src="https://loremflickr.com/1024/860?random=1" alt="">
      </figure>
      <figure class="item">
        <img src="https://loremflickr.com/1024/860?random=2" alt="">
      </figure>

      <figure class="item">
        <img src="https://loremflickr.com/1024/860?random=2" alt="">
      </figure>

      <figure class="item">
        <img src="https://loremflickr.com/1024/860?random=4" alt="">
      </figure>

      <figure class="item">
        <img src="https://loremflickr.com/1024/860?random=3" alt="">
      </figure>
    </div>

    <div class="form">
      <div class="button" id="add" @click="add">
        <svg t="1621567639573" class="button__icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8088" width="200" height="200">
          <path d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" p-id="8089"></path>
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8090"></path>
        </svg>
      </div>
      <div class="button" id="subtract" @click="subtract">
        <svg t="1621567672920" class="button__icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8222" width="200" height="200">
          <path d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" p-id="8223"></path>
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8224"></path>
        </svg>
      </div>
      <label for="grid-auto-flow">grid-auto-flow:</label>
      <select v-model="gridAutoFlow" name="grid-auto-flow" id="grid-auto-flow">
        <option value="row">row</option>
        <option value="column">column</option>
        <option value="dense">dense</option>
        <option value="row dense">row dense</option>
        <option value="column dense">column dense</option>
      </select>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  --grid-auto-flow: v-bind(gridAutoFlow);

  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  gap: 1rem;
  place-content: center;
  padding: 1rem;

  .container {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    grid-template-rows: repeat(2, 100px);
    gap: 1rem;
    grid-auto-flow: var(--grid-auto-flow);
    // 设置隐式 项目尺寸
    grid-auto-columns: 200px;
    grid-auto-rows: 100px;

    border: 1px dashed #f36;
    box-shadow: 0 0 0 6px rgb(0 0 0 / 13%);
    border-radius: 1px;
    margin-inline: auto;

    ::v-deep(.item) {
      margin: 0;
      padding: 0;

      background-color: #f7f7f7;
      border-radius: 2px;
      color: #000;
      padding: 4px;

      img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 3px;
        box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.25);
      }

      &:nth-child(1) {
        background-color: #f1c2c6;
      }
      &:nth-child(2) {
        grid-column: 3;
        grid-row: 2 / 4;
      }
      &:nth-child(5) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
      }
      &:nth-child(2n + 1) {
        background-color: #dac2f1;
      }
      &:nth-child(3n + 1) {
        background-color: #ccf1c2;
      }
      &:nth-child(4n + 1) {
        background-color: #c2e9f1;

        grid-column-end: span 2;
        grid-row-end: span 2;
      }
    }
  }

  .form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;

    .button {
      --background: #275efe;
      --rectangle: #184fee;
      --success: #4672f1;
      --text: #fff;
      --arrow: #fff;
      --checkmark: #fff;
      --shadow: rgba(10, 22, 50, 0.24);

      display: flex;
      background: var(--background);
      border-radius: 50%;
      box-shadow: 0 2px 8px -1px var(--shadow);
      color: var(--text);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: none 0;
      width: 44px;
      aspect-ratio: 1 / 1;
      cursor: pointer;

      &#subtract {
        --background: #242836;
        --rectangle: #1c212e;
        --arrow: #f5f9ff;
        --text: #f5f9ff;
        --success: #2f3545;
      }

      &:hover {
        transform: scale(0.95);
        box-shadow: 0 1px 4px -1px var(--shadow);
      }

      .button__icon {
        fill: var(--text);
        width: 100%;
        height: auto;
      }
    }

  }
}
</style>
